<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    :width="size"
    :height="size"
    :fill="fill"
    :stroke="stroke"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
    class="wellness-icon"
  >
    <!-- 心形基础 -->
    <path
      d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
    />

    <!-- 平衡符号 -->
    <circle cx="12" cy="9" r="2" />
    <line x1="12" y1="11" x2="12" y2="13" />
    <line x1="10" y1="13" x2="14" y2="13" />

    <!-- 和平波浪 -->
    <path d="M8 14.5c2-1 4 1 8 0" stroke-dasharray="1,1" />
    <path d="M8 16.5c2-1 4 1 8 0" stroke-dasharray="1,1" />
  </svg>
</template>

<script setup>
defineProps({
  size: {
    type: [Number, String],
    default: 24,
  },
  fill: {
    type: String,
    default: 'none',
  },
  stroke: {
    type: String,
    default: 'currentColor',
  },
})
</script>

<style scoped>
.wellness-icon {
  transition: all 0.3s ease;
}
.wellness-icon:hover {
  transform: scale(1.05);
}
</style>
